<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSS Tricks</title>
    <link rel="icon" href="static/favicon.ico" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta
      name="description"
      content="You-need-to-know-css,CSS tricks web developers need to know"
    />
    <meta
      name="Keywords"
      content="css,css tricks,translucent-borders,multiple-borders,inner-rounding,background-position,stripes-background,ellipse,parallelogram,bevel-corners,pie-chart,polygon,single-projection,irregular-projection,frosted-glass,zebra-stripes,text-effects,circular-text,mouse-cursor,extend-hit-area,custom-checkbox,custom-radio,input-align,shadow-weaken-background,blurry-weaken-background,image-slider,fluid-fixed,sticky-footer,centering-known,holy-grail-layout,double-wing-layout,elastic,blink,typing,shake,smooth,circular-smooth,text-underline,poptip,scrollbar,边框与背景,半透明边框,多重边框,边框内圆角,背景定位,条纹背景,常见形状,圆与椭圆,parallel四边形,切角效果,简易饼图,提示气泡,其他多边形,视觉效果,常见投影,不规则投影,毛玻璃效果,斑马条纹,文字特效,环形文字,图片对比控件,用户体验,选择合适的鼠标光标,扩大可点击区域,自定义复选框,自定义单选框,输入框完美居中,圣杯布局,双飞翼布局,类订单布局,通过阴影弱化背景,通过模糊弱化背景,自定义文字下划线,自定义scroll滚动条,结构布局,全背景等宽内容居中,绝对底部,水平垂直居中,有趣的布局,动画过渡,弹性过度,闪烁效果,打字效果,抖动效果,无缝平滑效果,延轨迹平滑效果"
    />
    <link rel="stylesheet" href="./assets/vue.css" />
    <link rel="stylesheet" href="./assets/vuep.css" />
    <link rel="stylesheet" href="./assets/gitalk.css" />
    <link rel="stylesheet" href="./assets/index.css" />
  </head>

  <body>
    <div id="app"></div>
    <script src="./libs/babel.min.js"></script>
    <script src="./libs/index.js?v=201804130341"></script>
    <!-- <script src="./libs/docsify.min.js"></script> -->
    <script src="//cdn.jsdelivr.net/npm/docsify@4.6.6/lib/docsify.min.js"></script>
    <!-- <script src="./libs/gitalk.min.js"></script> -->
    <script src="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
    <script src="./libs/vue.min.js"></script>
    <script src="./libs/vuep.min.js"></script>
    <script src="./libs/search.min.js"></script>
    <script src="./libs/ga.js"></script>
    <script src="./libs/emoji.js"></script>
    <script src="./libs/prism-markdown.min.js"></script>
    <script src="./libs/prism-scss.min.js"></script>
    <script src="./libs/docsify-pagination.min.js"></script>
    <script>
      // navigator.serviceWorker && navigator.serviceWorker.register('sw.js');
      // navigator.serviceWorker && navigator.serviceWorker.ready.then(registration => {
      //   registration.unregister();
      // });
      // Hotjar Tracking Code for https://lhammer.cn/You-need-to-know-css/#/
      (function (h, o, t, j, a, r) {
        h.hj =
          h.hj ||
          function () {
            (h.hj.q = h.hj.q || []).push(arguments);
          };
        h._hjSettings = { hjid: 773508, hjsv: 6 };
        a = o.getElementsByTagName("head")[0];
        r = o.createElement("script");
        r.async = 1;
        r.src = t + h._hjSettings.hjid + j + h._hjSettings.hjsv;
        a.appendChild(r);
      })(window, document, "https://static.hotjar.com/c/hotjar-", ".js?sv=");
    </script>
  </body>
</html>
